<template>
  <div id="cpn-fc-type-input-field"
    :style="{ '--fc-width': width, '--fc-height': height, '--fc-color': color, '--fc-border-color': borderColor, '--fc-font-size': fontSize }">
    <div v-if="type === 'textarea'">
      <transition name="tip_fade" mode="out-in">
        <div class="tip f16" v-if="(!$chy.isEmpty(placeholder) && !$chy.isEmpty(str)) || isFocus">
          {{ placeholder }}
        </div>
      </transition>
      <el-input type="textarea" v-model="str" @click="click" :placeholder="placeholder" @input="input" @focus="focus"
        @blur="blur"></el-input>
    </div>
    <div v-else-if="type === 'radio'">
      <!-- <div class="tip f16" v-if="!$chy.isEmpty(placeholder)">
        -- {{ placeholder }} --
      </div> -->
      <el-radio-group v-model="str" @input="input">
        <slot name="radio"></slot>
      </el-radio-group>
    </div>
    <div v-else-if="type === 'select'">
      <el-select v-model="str" :placeholder="placeholder" @change="input">
        <slot name="select"></slot>
      </el-select>
    </div>
    <fc-typing-input v-else class="fcInput" ref="fcInput" :type="type" @click="click" :placeholder="placeholder"
      @input="input" @focus="focus" @blur="blur"></fc-typing-input>

  </div>
</template>

<script>
import variables from '@/assets/styles/variables.module.scss'
export default {
  name: 'fcInput',
  props: {
    type: {
      typeof: String,
      default: 'text'
    },
    value: {
      typeof: String,
      default: ''
    },
    placeholder: {
      typeof: String,
      default: ''
    },
    // 自定义宽高
    width: {
      type: String,
      default: 'auto'
    },
    height: {
      type: String,
      default: '36px'
    },
    fontSize: {
      type: String,
      default: '12px'
    },
    color: {
      type: String,
      default: variables.themeColor1
    },
    borderColor: {
      type: String,
      default: variables.themeColor1
    }
  },
  watch: {
    value: {
      // immediate: true,
      handler(newVal) {
        if (this.type === 'textarea' || this.type === 'radio' || this.type === 'select') {
          this.str = newVal
        }

        if (!this.isFocus) {
          // console.log(2, newVal, this.$refs.fcInput.value)
          this.$refs.fcInput.value = newVal
        }
      }
    }
  },
  model: {
    prop: 'value',
    event: 'update'
  },
  data() {
    return {
      str: '',
      isFocus: false
    }
  },
  mounted() {
    // window.chy = this
    if (this.type === 'textarea' || this.type === 'radio' || this.type === 'select') {
      this.str = this.value
    } else {
      this.$refs.fcInput.value = this.value
    }
  },
  methods: {
    input() {
      if (this.type === 'textarea' || this.type === 'radio' || this.type === 'select') {
        this.$emit('update', this.str)
      } else {
        this.$emit('update', this.$refs.fcInput.value)
      }
    },
    click() {
      this.$emit('click')
    },
    focus() {
      this.isFocus = true
      this.$emit('focus')
    },
    blur() {
      this.isFocus = false
      this.$emit('blur')
    }
  }
}
</script>

<style lang="scss" scoped>
#cpn-fc-type-input-field {
  .fcInput {
    --width: var(--fc-width);
    --height: var(--fc-height);
    --color: var(--fc-color);
    --border-color: var(--fc-border-color);
    font-size: var(--fc-font-size);
  }

  ::v-deep .el-input__inner {
    border-color: var(--fc-border-color);
    color: var(--fc-color);
    transition: 0.2s;
  }
  ::v-deep .el-input__inner:focus {
    box-shadow: 0 0 6px var(--fc-border-color);
    transition: 0.2s;
  }

  ::v-deep .el-textarea__inner {
    // border-color: #0003;
    border-color: var(--fc-border-color);
    color: var(--fc-color);
    transition: 0.2s;
    font-size: var(--fc-font-size);
    background-color: transparent;
  }

  ::v-deep .el-textarea__inner:focus {
    box-shadow: 0 0 6px var(--fc-border-color);
  }

  .tip {
    color: var(--fc-color);
    font-size: var(--fc-font-size);
    height: 20px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    position: absolute;
    top: -12px;
    z-index: 2;
    background: #fbfbfb;
    // -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    // animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  }

  ::v-deep .el-radio__input.is-checked .el-radio__inner {
    border-color: var(--fc-border-color);
    background: var(--fc-color);
  }

  ::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: var(--fc-color);
  }

  .tip_fade-enter-active {
    transition: all 0.25s ease;
  }

  .tip_fade-leave-active {
    transition: all 0.25s ease;
  }

  .tip_fade-enter,
  .tip_fade-leave-to {
    opacity: 0;
  }

  .tip_fade-enter-to,
  .tip_fade-leave {
    opacity: 1;
    -webkit-animation: tracking-in-expand 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  }
}
</style>